<template>
	<view class="container">
		<view class="title">
			选择学习阶段<text>（可随时更改，请放心选择 ）</text>
		</view>
		<view class="selectContainer">
			<view class="item" v-for="(item,index) in info" :key="index">
				<navigator :url="'./class_select?id='+item.id" hover-class="none">
					<image :src="item.image" mode=""></image>
					<view class="text">
						{{item.name}}
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				token: "",
			}
		},
		created() {
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					console.log(res.data.token);
					this.getData();
				},
				fail:()=> {
					this.init();
				}
			});
		},
		methods: {
			init() {
				uni.getStorage({
					key: 'user_info',
					success: (res) => {
						this.token = res.data.token;
						if (this.token) {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									let longitude = res.longitude;
									let latitude = res.latitude;
									uni.request({
										url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/uploadLocation',
										data: {
											"token": this.token,
											"longitude": longitude,
											"latitude": latitude
										},
										method: 'GET',
										success: res => {
											console.log(res);
											
										},
										fail: (res) => {
											console.log(res)
											this.wxLogin();
										},
									});
								},
								fail: () => {
									this.wxLogin();
								}
							});
						} else {
							this.wxLogin();
						}
					},
					fail: () => {
						this.wxLogin();
					}
				});
			},
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log(loginRes)
						this.code = loginRes.code;
						this.$request('/api/wxapp/index/wxLogin', {
							'code': loginRes.code
						}).then(wxLoginRes => {
							if (wxLoginRes.code === 1) {
								this.isReg = wxLoginRes.data.is_reg;
								this.session_key = wxLoginRes.data.session_key;
								this.openid = wxLoginRes.data.openid;
								uni.setStorageSync('openid', this.openid);
								if (this.isReg) {
									this.auth();
								} else {
									uni.redirectTo({
										url: '../login/auth?redirect=../stage/index'
									});
								}
							}
						})
					}
				});
			},
			auth() {
				let param = {
					'openid': this.openid
				}
				this.$request('/api/wxapp/index/accountLogin', param)
					.then(res => {
						let userinfo = res.data.userinfo;
						console.log(userinfo)
						uni.setStorage({
							key: 'user_info',
							data: userinfo,
							success: () => {
								console.log('success');
								this.token = userinfo.token;
								this.getData();
							}
						});
						if (res.data.usernum > 1) {
							uni.navigateTo({
								url: '../login/user_select'
							});
						}
					})
			},
			getData() {
				uni.request({
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/getCategory',
					method: 'GET',
					data: {
						"token": this.token
					},
					success: res => {
						if (res.statusCode === 200 && res.data.code === 1) {
							uni.hideLoading();
							this.info = res.data.data;
						} else {
							uni.redirectTo({
								url: '../login/auth'
							});
						}
						console.log(res)
					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						console.log(res)
					}
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 40rpx;
	}

	.title {
		font-size: 15px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #333333;
		line-height: 46rpx;

		text {
			font-size: 13px;
			color: #999999;
		}
	}

	.selectContainer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 320rpx;
			height: 226rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 40rpx 0px #E9EBF6;
			border-radius: 8rpx;
			margin-top: 40rpx;

			image {
				display: block;
				width: 112rpx;
				height: 112rpx;
				margin: 32rpx auto 20rpx auto;
			}

			.text {
				font-size: 15px;
				color: #333333;
				text-align: center;
			}
		}
	}
</style>
